<template>
  <div id="app" class="container">
    <div class="header" v-if="detailContext.competitionName">
      <h1>{{ detailContext.competitionName }}</h1>
    </div>

    <div class="content-section">
      <div class="left-column">
        <div class="info-item" v-if="detailContext.organizeName">
          <strong>主办方：</strong> {{ detailContext.organizeName }}
        </div>
        <div class="info-item" v-if="detailContext.participants">
          <strong>参赛人员：</strong> {{ detailContext.participants }}
        </div>
        <div class="info-item" v-if="detailContext.fee">
          <strong>参赛费用：</strong> {{ detailContext.fee }} 元
        </div>
        <div class="info-item" v-if="detailContext.maxTeam">
          <strong>每队人数：</strong> {{ detailContext.maxTeam }} 人
        </div>
      </div>
      <div class="right-column">
        <div class="section" v-if="detailContext.content">
          <h2>比赛简介</h2>
          <p>{{ detailContext.content }}</p>
        </div>
        <div class="section" v-if="detailContext.requirements">
          <h2>参赛要求</h2>
          <ul>
            <li
              v-for="(req, index) in detailContext.requirements.split('\n')"
              :key="index"
            >
              {{ req }}
            </li>
          </ul>
        </div>
        <div class="section" v-if="detailContext.prizes">
          <h2>奖项设置</h2>
          <p
            v-for="(prize, index) in detailContext.prizes.split('\n')"
            :key="index"
          >
            {{ prize }}
          </p>
        </div>
      </div>
    </div>
    <div class="competition-detail-comment">
      <div class="lou">
        <!-- 回复表单 -->
        <el-form
          ref="replyForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="reply-form"
        >
          <el-form-item label="回复内容" prop="content">
            <el-input
              type="textarea"
              :rows="3"
              v-model="ruleForm.content"
              placeholder="请输入回复内容"
            ></el-input>
          </el-form-item>
          <el-form-item class="plbotton">
            <el-button size="mini" type="primary" @click="submitReply()"
              >发送</el-button
            >
            <el-button size="mini" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <comment
        :comments="comments"
        :cNum="cNum"
        :competitionId="competitionId"
        :goUrl="'/manage/competition/' + competitionId + '/player/'"
        @comment-updated="updateComments"
      />
    </div>
  </div>
</template>

<script>
import {
  reqGetCompetitionDetail,
  reqGetCompetitionComment,
  reqAddCompetitionComment,
} from "@/api";
import comment from "@/components/competition/comment";
export default {
  name: "competitionDetail",
  components: { comment },
  data() {
    return {
      detailContext: {},
      comments: [],
      cNum: 0,
      // goUrl:'/menage/competition/player/',
      // 回复表单数据
      ruleForm: {
        content: "",
      },
      // 表单验证规则
      rules: {
        content: [
          { required: true, message: "请输入回复内容", trigger: "blur" },
          {
            min: 2,
            max: 500,
            message: "内容长度在2到500个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userForm.userId;
    },
    competitionId() {
      return this.$route.params.id;
    },
  },
  mounted() {
    this.getCompetitionDetail();
    this.getCompetitionComment();
    // console.log("id:",this.$store.state.user,this.userId);
  },
  methods: {
    /**
     * 更新评论列表
     * @param {Array} updatedComments 新的评论数据
     */
    updateComments() {
      this.getCompetitionComment();
      this.$message.success("评论列表已更新");
    },
    async getCompetitionDetail() {
      const res = await reqGetCompetitionDetail(this.competitionId);
      if (res.code !== 200) return;
      this.detailContext = res.data;
    },

    async getCompetitionComment() {
      const res = await reqGetCompetitionComment(this.competitionId);
      if (res.code !== 200) return;
      this.comments = res.data;
      console.log(this.comments);
    },

    /**
     * 提交回复
     * @param {Object} parentComment 父级评论对象
     */
    async submitReply() {
      // 验证表单
      this.$refs.replyForm.validate(async (valid) => {
        if (valid) {
          const newComment = {
            userId: this.userId,
            parentId: 0,
            content: this.ruleForm.content,
          };
          // console.log(newComment);
          const res = await reqAddCompetitionComment(
            this.competitionId,
            newComment
          );
          if (res.code === 0) {
            this.getCompetitionComment();
          }
          // 重置表单
          this.resetForm();
        }
      });
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.replyForm.resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
// 定义变量
$primary-bg: #f9f9f9;
$card-bg: #fff;
$text-color: #333;
$shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
$border-radius: 6px;
$max-width: 1000px;
$padding: 20px;

// 基础容器
.container {
  width: 90%;
  max-width: $max-width;
  margin: 0 auto;
  margin-top: 10px;
  padding: $padding;
  font-family: Arial, sans-serif;
  background-color: $primary-bg;
  border-radius: 8px;
  text-align: left; // 整体左对齐
}

.header {
  text-align: center; // 标题仍居中
  font-size: 25px;
  margin-bottom: 20px;
}

.content-section {
  display: block; // 垂直排列布局
}

.left-column,
.right-column {
  background-color: $card-bg;
  padding: $padding;
  border-radius: $border-radius;
  box-shadow: $shadow;
  margin-bottom: 20px; // 下方间距

  h2 {
    color: $text-color;
    text-align: left; // 标题左对齐（可选）
  }
}

.info-item,
.section {
  text-align: left; // 明确文本左对齐
}

// 列表项左对齐（针对 ul/li）
.left-column ul,
.right-column ul {
  padding-left: 20px; // 保持缩进
  //   list-style-type: disc; // 默认圆点符号
}

// 段落左对齐
.left-column p,
.right-column p {
  text-align: left;
}
// 输入框样式
.reply-form {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 12px;

  .plbotton {
    text-align: right;
    margin-top: 8px;
  }
}
</style>
